<template>
  <div id="">
      <input type="text" v-model="txtVal">
      <button @click="arrAdd">增加</button>
      <ul>
        <li v-for="(item,index) in arr" :key='index'>
              {{item}}<button @click="del(index)">删除</button>
        </li>
      </ul>
  </div>
</template>

<script type="text/javascript">
import { reactive, ref } from '@vue/reactivity'
export default {
  setup(){
      let txtVal=ref("");
      let arr=reactive(['1','2'])

      let arrAdd=()=>{
        arr.push(txtVal.value);
        txtVal.value=''
      }

      let del=(index)=>{
        arr.splice(index,1);
      }
      return{
        txtVal,
        arr,
        arrAdd,
        del
      }
  }
}
</script>

<style lang="less" scoped>
</style>
